<template>
  <div class="marquee" :style="style">
    <span
      class="marquee-text"
      :style="{
        animation:
          widget.option.marquee.direction +
          widget.id +
          ' ' +
          widget.option.marquee.duration +
          's linear infinite',
      }"
    >
      {{ this.widget.option.data.value }}
    </span>
  </div>
</template>
<script>
import { renderWidgetData } from "../tools/DataUtils";
export default {
  props: {
    widget: {
      type: [Object],
      default: () => {},
    },
  },
  data() {
    return {
      render: null,
    };
  },
  computed: {
    style() {
      return {
        width: this.widget.location.width + "px",
        height: this.widget.location.height + "px",
        fontSize: this.widget.option.fontSize + "px",
        fontWeight: this.widget.option.fontWeight,
        color: this.widget.option.color,
        textAlign: this.widget.option.textAlign,
        lineHeight: this.widget.option.lineHeight + "px",
        backgroundColor: this.widget.option.backgroundColor,
      };
    },
    keyframes() {
      return {
        width: this.widget.location.width,
        content: this.widget.option.data.value,
      };
    },
    data() {
      return this.widget.data;
    },
    refresh() {
      return this.widget.service.timestamp;
    },
  },
  watch: {
    keyframes: {
      handler() {
        this.refresWidthAndAddKeyframes();
      },
      deep: true,
    },
    data: {
      handler(val) {
        this.widget.option.data.value = val.value;
      },
      deep: true,
    },
    refresh: {
      handler() {
        this.refreshWidgetInfo();
      },
    },
  },
  mounted() {
    this.refreshWidgetInfo();
  },
  destroyed() {
    this.recoveryRenderObject();
  },
  methods: {
    refreshWidgetInfo() {
      this.recoveryRenderObject();
      this.render = renderWidgetData(this.widget, this.refreshWidgetData);
    },
    refreshWidgetData(data) {
      const tempValue = this.widget.option.data.value;
      this.widget.option.data.value = data.value;
      if (tempValue === data.value) {
        this.refresWidthAndAddKeyframes();
      }
    },
    refresWidthAndAddKeyframes() {
      this.$nextTick(() => {
        const marqueeText = document.getElementsByClassName("marquee-text")[0];
        // 要等元素加载完后才能获取宽度，不然的话，宽度会为0
        if (marqueeText.clientWidth) {
          this.widget.option.marquee.begin = marqueeText.clientWidth + 5;
        }
        this.widget.option.marquee.end = -this.widget.location.width - 5;

        // 设置StyleSheet - Keyframes
        let styleSheet = null;
        for (let i = 0; i < document.styleSheets.length; i++) {
          const cssStyleSheet = document.styleSheets[i];
          for (let j = 0; j < cssStyleSheet.cssRules.length; j++) {
            const cssRules = cssStyleSheet.cssRules[j];
            if (cssRules.selectorText === ".marquee") {
              styleSheet = cssStyleSheet;
              break;
            }
          }
          if (styleSheet !== null) {
            break;
          }
        }
        let index = null;
        for (let i = 0; i < styleSheet.cssRules.length; i++) {
          let cssRule = styleSheet.cssRules[i];
          if (
            cssRule.name &&
            cssRule.name ===
              this.widget.option.marquee.direction + this.widget.id
          ) {
            index = i;
            break;
          }
        }
        if (index !== null) {
          styleSheet.deleteRule(index);
        }
        const keyframes =
          "@keyframes " +
          this.widget.option.marquee.direction +
          this.widget.id +
          " {0% {transform: translateX(" +
          this.widget.option.marquee.begin +
          "px);} 100% {transform: translateX(" +
          this.widget.option.marquee.end +
          "px);}}";
        styleSheet.insertRule(keyframes);
      });
    },
    recoveryRenderObject() {
      if (this.render && this.render.apiTimer) {
        clearInterval(this.render.apiTimer);
        this.render.apiTimer = null;
      }
      if(this.render && this.render.websocket) {
        this.render.websocket.doDisconnect();
      }
    },
  },
};
</script>
<style lang="stylus">
.marquee {
  overflow: hidden;
  text-align: right;

  .marquee-text {
    display: inline-block;
    animation-fill-mode: forwards;
  }
}
</style>

